<template>
    <div style="font-size:larger">
      <!-- 数据统计图表 -->
      <el-card>
        <div slot="header" class="clearfix">
          <h4>数据统计图表</h4>
        </div>
        <div class="data-item" style="display:flex">
          <!-- 注册用户增长趋势图 -->
          <!-- <el-chart :data="registeredUserChartData" type="line"></el-chart> -->
          <!-- 其他数据统计图表 -->
          <div id="main" style="width: 850px; height: 300px ;margin-left:350px;"></div>
          
        </div>
      </el-card>
      <!-- 系统概览信息 -->
      <el-card>
        <div slot="header" class="clearfix" style="display:flex;justify-content:space-between;align-items: center;">
          <h4>系统概览信息</h4>
        </div>
        <div class="data-item" style="display:flex;justify-content:space-between;align-items: center;">
          <span><h6>注册用户数量:</h6> {{ userData.registeredUsers }}</span>
          <span><h6>宠物数量:</h6> {{ petData.totalPets }}</span>
          <!-- 其他系统概览信息 -->
        </div>
      </el-card>
  
      <!-- 最近的活动信息 -->
      <el-card>
        <div slot="header" class="clearfix">
          <h4>最近的活动信息</h4>
        </div>
        <div class="data-item">
          <!-- 最近预约记录 -->
          <span><h6>最近预约记录:</h6> {{ recentActivity.latestAppointments }}</span>
          <!-- 最近服务记录 -->
          <span><h6>最近服务记录:</h6> {{ recentActivity.latestServiceRecords }}</span>
          <!-- 最近诊疗记录 -->
          <span><h6>最近诊疗记录: </h6>{{ recentActivity.latestMedicalRecords }}</span>
          <span><h6>今日预约个数: </h6>{{ recentActivity.todayAppointmentCount }}</span>
        </div>
      </el-card>

  
      
    </div>
  </template>
  
  <script>
  import {
    getUserCounts,getPetCounts,getAppointmentCounts,getServiceRecordsCounts,getMedicalRecordsCounts,getAppointmentType,getTodayAppointmentsCount
} from "@/utils/request";
import * as echarts from "echarts";
  export default {
    data() {
      return {
        dataList: [],
        userData: {
          registeredUsers: 0,
          // 其他系统概览信息数据
        },
        petData: {
          totalPets: 0,
          // 其他系统概览信息数据
        },
        recentActivity: {
          latestAppointments: 0,
          latestServiceRecords: 0,
          latestMedicalRecords: 0,
          todayAppointmentCount:0
          // 其他最近活动信息数据
        },
        systemNotices: {
          systemUpdate: '',
          userNotifications: '',
          importantNotifications: '',
          // 其他系统公告和提醒数据
        },
        systemPerformance: {
          runningTime: '',
          memoryUsage: '',
          cpuUsage: '',
          diskStorage: '',
          // 其他系统性能和运行状态数据
        },
        registeredUserChartData: [],
        // 其他数据统计图表数据
      };
    },
    methods: {
     //1.挂载时获取所有的数据
    getAllData() {
      // 使用 Promise.all 等待所有数据请求完成
      Promise.all([
      getUserCounts(),getPetCounts(),getAppointmentCounts(),getServiceRecordsCounts(),getMedicalRecordsCounts(),getAppointmentType(),getTodayAppointmentsCount()
      ])
        .then((responses) => {
          // 处理每个请求的响应数据
          this.userData.registeredUsers = responses[0].data.data;
          this.petData.totalPets = responses[1].data.data;
          this.recentActivity.latestAppointments = responses[2].data.data;
          this.recentActivity.latestServiceRecords = responses[3].data.data;
          this.recentActivity.latestMedicalRecords = responses[4].data.data;
          this.dataList = responses[5].data.data;
          this.recentActivity.todayAppointmentCount = responses[6].data.data;
          // 初始化图表
          this.initCharts();
        })
        .catch((error) => {
          console.error("数据请求失败:", error);
        });
    },
    initCharts() {
      // 初始化图表
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "宠物医院管理系统",
          subtext: "预约项目总览",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Resources List",
            type: "pie",
            radius: "50%",
            data: this.dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    },
    mounted() {
      this.getAllData();
    },
  };
  </script>
  
  <style scoped>
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  
}

.el-card {
  border: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  /* 调整卡片的上下外边距 */
}

.card-header {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px; /* 调整卡片头部标题的下外边距 */
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.chart-container {
  padding: 20px;
}

/* .chart {
  width: 100%;
  height: 500px;
} */
h4{
  margin-top: -10px;
  margin-bottom: -40px;
}
h5{
  margin-bottom: -20px;
}
</style>

  